<template>
  <el-card class="card">
    <el-tabs v-model="activeName">
      <el-tab-pane label="公司架构" name="first"></el-tab-pane>
    </el-tabs>

    <!-- 头部 -->
    <div class="box">
      <treetools :item="topitem" :istop="true"></treetools>
      <hr />
      <el-tree :data="list" :props="defaultProps" default-expand-all>
        <treetools slot-scope="{ data }" :item="data"></treetools>
      </el-tree>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      //标题
      topitem: {
        label: "xx科技有限公司",
      },

      activeName: "first",
      list: [
        {
          label: "董事长",
        },
        {
          label: "法务部",
        },
        {
          label: "行政部",
        },
        {
          label: "技术部",
          children: [
            {
              label: "前端开发",
            },

            {
              label: "后端开发",
            },
          ],
        },
        {
          label: "运营部",
        },
        {
          label: "财务部",
          children: [
            {
              label: "采购核算",
            },
            {
              label: "薪资核算",
            },
            {
              label: "税务管理",
            },
          ],
        },
        {
          label: "公关部",
          children: [
            {
              label: "男公关",
            },
            {
              label: "女公关",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {},
  components: {
    treetools: () => import("./components/tree-tools.vue"),
  },
};
</script>

<style lang="scss">
.card {
  margin: 30px;
  // padding: 20px 80px;
}
.box {
  width: 85%;
  margin: 0 auto;
  margin-top: 40px;
}
</style>